<template>
  <baidu-map
    class="bm-view"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
    @ready="handleMapReady"
  >
    <bm-marker :position="position" animation="BMAP_ANIMATION_BOUNCE">
      <bm-label
        :content="address"
        :labelStyle="{background: '#fff','min-width': '150px','border-radius': '4px',border: '1px solid #ebeef5',padding: '12px',color: '#606266','text-align': 'justify','font-size': '16px','box-shadow': '0 2px 12px 0 rgba(0,0,0,.1)'}"
        :offset="{width: 0, height: 30}"
      />
    </bm-marker>
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT" />
  </baidu-map>
</template>

<script>
  export default {
    props: {
      // 经度
      lng: String,
      // 维度
      lat: String,
      // 地址
      address: String
    },
    data() {
      return {
        // 百度地图中心点
        center: { lng: 0, lat: 0 },
        // 百度地图缩放级别
        zoom: 3,
        // 标注位置
        position: { lng: this.lng, lat: this.lat }
      };
    },
    methods: {
      // 百度地图初始化完成
      handleMapReady({ BMap, map }) {
        this.center.lng = this.lng;
        this.center.lat = this.lat;
        this.zoom = 25;
      }
    }
  };
</script>

<style>
</style>
